:root {
    --nav-height: 8vh; /* 导航高度 */
    --main-min-height: 750px; /* 主内容最小高度 */
    --about-height: 850px; /* 关于部分高度 */
    --contact-height: 850px; /* 联系部分高度 */
    --advertise-height: 850px; /* 广告部分高度 */
    --footer-height: 400px; /* 页脚高度 */
    --button-width: 80px; /* 按钮宽度 */
    --button-height: 50px; /* 按钮高度 */
    --search-button-height: 30px; /* 搜索按钮高度 */
    --icon-size: 40px; /* 图标大小 */
    --font-size-large: 4rem; /* 大字体大小 */
    --font-size-medium: 1.5rem; /* 中等字体大小 */
    --font-size-small: 1rem; /* 小字体大小 */
}

body {
    width: 100%;
    height: 100vh; 
    background: linear-gradient(75deg, #A8C1EF, #F9C2EA);
    font-size: 100%; /* 基础字体大小 */
    box-sizing: border-box; /* 使内边距和边框包含在元素的总宽度和高度中 */
}

* {
    box-sizing: inherit; /* 继承 box-sizing 属性 */
}

nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--nav-height); /* 使用变量 */
    background-color: aqua;
    display: flex;
    justify-content: space-between;
}

.Navigation .Navigation-left,
.Navigation .Navigation-center,
.Navigation .Navigation-right {
    width: 30%;
}

.Navigation .Navigation-left img {
    width: 120px;
    height: 60px;
}

.Navigation .Navigation-center {
    width: 40%;
    margin: auto 0 auto 15px;
    display: flex; /* 添加 flex 布局 */
}

.Navigation .Navigation-center input {
    margin: auto 3px;
    width: 80%; /* 输入框宽度 */
    height: var(--search-button-height); /* 使用变量设置输入框高度 */
    font-size: var(--font-size-medium); /* 使用变量设置字体大小 */
    padding: 0 10px; /* 添加内边距 */
}

.Navigation .Navigation-center button {
    width: auto; /* 设置为自动宽度 */
    height: var(--search-button-height); /* 设置按钮高度与输入框一致 */
    margin-left: 3px; /* 添加左边距以分隔输入框和按钮 */
    padding: 0 10px; /* 添加内边距以调整按钮宽度 */
    font-size: var(--font-size-medium); /* 使用变量设置字体大小 */
    display: flex; /* 使按钮内容居中 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
}

.Navigation .Navigation-right {
    display: flex;
}

.Navigation .Navigation-right .placeholder-button {
    width: 70%;
}

.Navigation .Navigation-right .buttons {
    width: 25%;
    display: flex;
    justify-content: space-around;
}

.Navigation .Navigation-right .buttons button {
    width: var(--button-width); /* 使用变量 */
    height: var(--button-height); /* 使用变量 */
    margin-top: 13px;
    margin-bottom: 3px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.Navigation .Navigation-right .buttons button .button-content {
    margin-top: 8px;
}

.Navigation .Navigation-right .buttons button i {
    font-size: 15px;
    padding: 5px;
}

.Navigation .Navigation-right .buttons button p {
    font-size: var(--font-size-small); /* 使用变量 */
    margin-top: 3px;
    text-align: center;
    display: block;
}

main .welcome {
    width: 100%;
    height: auto;
    min-height: var(--main-min-height); /* 使用变量 */
    background: linear-gradient(45deg, #A8C1EF, #F9C2EA);
}

#p-first,
#p-last {
    font-family: "Lucida Console", Courier, monospace;
    margin-top: 200px;
    text-align: center;
    font-size: var(--font-size-large); /* 使用变量 */
}

main .welcome h1 {
    text-align: center;
    margin-top: 100px;
    font-size: var(--font-size-large); /* 使用变量设置字体大小 */
}

main .about {
    width: 100%;
    height: var(--about-height); /* 使用变量 */
    background: linear-gradient(-45deg, #F78EA5, #DDD2A4);
}

main .about h2 {
    text-align: center;
    font-size: var(--font-size-medium); /* 使用变量 */
    padding: 80px 0 40px 0;
}

main .about .about-welcome {
    display: flex;
    align-items: center; 
}

main .about .about-welcome .development {
    width: 50%;
    margin-left: 25%;
}

main .about .about-welcome .development ul li {
    margin: 10px;
}

main .about .about-welcome .development ul li a {
    font-size: 20px;
    color: black;
    text-decoration: none;
}

main .about .about-welcome .workplace {
    width: 50%;
    margin-left: -20%;
    display: flex;
    justify-content: center; 
}

main .about .about-welcome .workplace img {
    width: 80%;
    height: auto;
}

main .contact {
    width: 100%;
    height: var(--contact-height); /* 使用变量 */
}

main .contact h2 {
    text-align: center;
    font-size: var(--font-size-medium); /* 使用变量 */
    padding: 100px 0 40px 0;
}

main .contact .contact-styles ul {
    margin-top: 90px;
    display: flex;
    justify-content: space-around;
}

main .contact .contact-styles .QR {
    display: flex;
}

main .contact .contact-styles .QR .QR_left,
main .contact .contact-styles .QR .QR_right {
    width: 50%;
    margin-top: 5%;
    margin-left: 20%;
}

main .contact .contact-styles .QR .QR_left img,
main .contact .contact-styles .QR .QR_right img {
    width: 25%;
    height: auto;
}

main .contact .contact-styles .QR .QR_left p,
main .contact .contact-styles .QR .QR_right p {
    text-align: left;
}

main .contact .contact-styles ul li {
    margin: 50px;
    list-style: none;
}

main .contact .contact-styles ul li button {
    width: var(--button-width); /* 使用变量 */
    background: linear-gradient(45deg, #A8C1EF, #F9C2EA);
    padding: 10px;
    cursor: pointer;
}

main .contact .contact-styles ul li button:hover {
    background-color: transparent;
    color: white;
}

main .contact .contact-styles ul li button i {
    font-size: 50px;
}

main .contact .contact-styles ul li button p {
    margin-bottom: -5px;
}

main .advertise {
    width: 100%;
    height: var(--advertise-height); /* 使用变量 */
    background: linear-gradient(#6F95F8, #5CBFC6);
}

main .advertise h2 {
    text-align: center;
    font-size: var(--font-size-medium); /* 使用变量 */
    padding: 100px 0 40px 0;
}

main .advertise p {
    margin-left: 20%;
    margin-top: 40px;
}

main .advertise a {
    font-size: 20px;
    color: black;
    text-decoration: none;
}

body .icon {
    position: fixed;
    top: 700px;
    right: 20px;
}

body .icon button {
    width: 50px;
    height: 50px;
    background-color: lightblue;
    border-radius: 50%;
    cursor: pointer;
}

body .icon button:hover {
    background-color: transparent;
    color: white;
}

body .icon button i {
    font-size: var(--icon-size); /* 使用变量 */
    margin-left: -2.5px;
}

footer {
    width: 100%;
    height: var(--footer-height); /* 使用变量 */
    background-color: #70727F;
    display: flex;
}

footer .footer-left,
footer .footer-right {
    width: 50%;
    height: 100%;
}

footer .footer-left button {
    width: 50%;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

footer .footer-left p,
footer .footer-left h3 {
    margin-left: 12%;
    justify-content: center;
}

footer .footer-left h3 {
    font-size: 140%;
}

footer .footer-left button img {
    width: 100%;
}

footer .footer-right h2 {
    margin-top: 4%;
    margin-left: 10%;
}

footer .footer-right p {
    margin: 0 10%;
}

/* 添加媒体查询以适应不同屏幕尺寸 */
@media (max-width: 768px) {
    .Navigation .Navigation-left,
    .Navigation .Navigation-center,
    .Navigation .Navigation-right {
        width: 100%; /* 在小屏幕上使导航项占满宽度 */
        flex-direction: column; /* 垂直排列 */
    }
    .Navigation .Navigation-center input,
    .Navigation .Navigation-center button {
        width: 90%; /* 调整输入框和按钮的宽度 */
    }
}